
<template>
	<loadingHtml v-if="issHow"></loadingHtml>
<view class="" v-else>
	<view>
		<view class="top">
			<view class="top1">
				<u-icon name="map"></u-icon>
				<u-search placeholder="日照香炉生紫烟" v-model="keyword" @custom='sou'></u-search>
			</view>
			<u-tabs :list="list2" @click="dh"></u-tabs>
		</view>
	
		<view class="lun">
			<u-swiper height="400rpx" :list="list1" indicator autoplay interval="1000" circular></u-swiper>
		</view>
	
		<view class="lx">
			<u-grid col="5">
				<u-grid-item v-for="(baseListItem,baseListIndex) in baseList" :key="baseListIndex">
					<!--      <u-icon
		                        :customStyle="{paddingTop:20+'rpx'}"
		                        :name="baseListItem.name"
		                        :size="22"
		                ></u-icon> -->
					<image :src="baseListItem.name" mode=""></image>
					<text class="grid-text">{{baseListItem.title}}</text>
				</u-grid-item>
			</u-grid>
			<u-toast ref="uToast" />
		</view>
		<view class="t">
			<view class="t1">
	<view class="wz">
		<text class="xs">限时秒杀</text>
		<text>查看更多></text>
	</view>
	<view class="stop">
		每天0点场，好货秒不停
	</view>
	<view class="time">
		<text>05</text>:
		<text>05</text>:
		<text>48</text>
	</view>
			</view>
			<view class="t2">
				<view class="yt">
			<view class="new">
				品牌上新
			</view>
			<view class="time">
				九点整，抢大牌
			</view>
			<view class="hb">
				疯狂抢红包>
			</view>
				</view>
				<view class="yt1">
					<view class="new">
						日用好物
					</view>
					<view class="time">
						愿君多采撷
					</view>
					<view class="hb">
						塞满奖卷>
					</view>
				</view>
				<!-- <image src="../../static/image/图2.png" mode=""></image> -->
				<!-- <image src="../../static/image/图3.png" mode=""></image> -->
			</view>
		</view>
		<view class="shiy">
			<view class="q">
				<text>双十一</text>
				<text>畅销全部</text>
			</view>
			<view class="t">
				<image src="../../static/image/pre01.png" mode=""></image>
				<image src="../../static/image/pre02.png" mode=""></image>
				<image src="../../static/image/pre03.png" mode=""></image>
				<image src="../../static/image/pre04.png" mode=""></image>
			</view>
		</view>
		<view class="an">
			<text @click="flgs(0)" :class="flg==0?'active':''">热门推荐</text>
			<text @click="flgs(1)" :class="flg==1?'active':''">上新推荐</text>
			<text @click="flgs(2)" :class="flg==2?'active':''">所有商品</text>
		</view>
	
		<ul>
			<li class='box' v-for="item in list" :key="item.id" @click='sp(item.id)'>
	
				<view class="l">
					<image :src="'http://localhost:3000'+item.img" mode=""></image>
				</view>
				<view class="w">
					<view class="">
						{{item.goodsname}}
					</view>
					<view class="xj">
						<text>现价</text>
						<text>{{item.price}}</text>
					</view>
					<view class="yj">
						<text>原价</text>
						<text>{{item.market_price}}</text>
					</view>
					<button>购买</button>
				</view>
			</li>
			
				
		</ul>
	
	</view>
</view>

</template>

<script>
	import loadingHtml from '../../component/index.vue'
	import {
		getBanner,
		getCate,
		gethortGoods,
	
	} from '@/request/app.js'
	// import uIcon from '@/uni_modules/uview-ui/components/u-icon/u-icon.vue'
	export default {
		components: {
loadingHtml
		},
		data() {
			return {
				baseList: [{
						name: '../../static/image/icon1.png',
						title: '限时抢购'
					},
					{
						name: '../../static/image/icon2.png',
						title: '畅销商品'
					},
					{
						name: '../../static/image/icon3.png',
						title: '品质大牌'
					},
					{
						name: '../../static/image/icon4.png',
						title: '小U自营'
					},
					{
						name: '../../static/image/icon5.png',
						title: '积分越换'
					},
				],
				keyword:'',
				list1: [],
				list2: [],
				arr: [],
				list:[],
				flg:'',
				issHow:true


			}
		},

		onLoad() {
			// getBanner().then(res=>{
			// 	console.log(res);
			// })
			this.getNewBanner()
			this.getCate()
			gethortGoods().then(res => {
				console.log(res, '222222222');
				if (res.data.code == 200) {
					this.arr = res.data.list
				
					 this.list = res.data.list[0].content;
				}
				console.log(this.arr, 'rrrrrrrrr');
			}),
			setTimeout(err=>{
				this.issHow=false
			},2000)
		},
		methods: {
		    flgs(i) {
		      this.flg = i;
		      this.list = this.arr[i].content;
			  console.log(this.list);
		    },
			// 轮播图
			async getNewBanner() {
				let result = await getBanner()
				console.log(result, '结果');

				if (result.data.code == 200) {
					this.list1 = result.data.list.map(item => this.$imgUrl + item.img)
				}
			},
			async getCate() {
				let res = await getCate()
				console.log(res, '首页快速导航');
				if (res.data.code == 200) {
					this.list2 = res.data.list.map(item => ({
						name: item.catename
					}))
					console.log(this.list2, '结果');
				}
			},
dh(i){
	console.log(i,'999999999');

	let a=i.index+1

	uni.navigateTo({url:'../list/list?cateid='+a+'&type='+1})
},
sp(i){
	console.log(i,'111111111');
	uni.navigateTo({
		url:'../detail/detail?id='+i
	})
},
sou(a){
	
	
			uni.navigateTo({
				url:'../lists/lists?keywords='+a
			})
	

}
		},
	}
</script>

<style lang="scss">

	.active {
	  background: orange;
	  color: white;

	}
	.top {

		background: #FF6600;
	}

	.top1 {
		display: flex;
	}

	.lun {
		margin-top: 25rpx;

	}

	.t {
		display: flex;
		background: #ccc;
		padding: 10rpx;
	}

	.t1{
		width: 800rpx;
		height: 300rpx;
		background-image: url(../../static/image/big.png);
	}
	

	.t2  {
		margin-left: 10rpx;
	}
	.yt{
		width: 300rpx;
		height: 142rpx;
			background-image: url(../../static/image/图2.png);
	}
	.yt1{
		margin-top: 10rpx;
		width: 300rpx;
		height: 142rpx;
			background-image: url(../../static/image/图3.png);
	}

	.lx image {
		width: 60rpx;
		height: 60rpx;
	}

	.shiy image {
		width: 170rpx;
		height: 200rpx;

	}

	.shiy .q {
		padding: 30rpx;
		display: flex;
		justify-content: space-around;
	}

	.shiy .t {
		display: flex;
		justify-content: space-around;
		margin-right: 10rpx;
	}

	.an {
		display: flex;
		justify-content: space-around;
		font-size: 30rpx;
		color: orange;
		margin-top: 30rpx;

	}

.an text{
	height: 70rpx;
	line-height: 70rpx;
	width: 150rpx;
	text-align: center;
}
	.box {
		border: 1rpx solid #ccc;
		display: flex;
		margin-top: 20rpx;
		padding: 30rpx;
	}

	.l image {
		width: 260rpx;
		height: 200rpx;
	}

	.l {
		margin-right: 30rpx;

	}

	button {
		background-color: orange;
		width: 200rpx;
		height: 60rpx;
		color: white;
		line-height: 60rpx;
	}

	.w view {
		margin-bottom: 10rpx;
	}

	.xj {
		color: red;
	}

	.yj {
		color: #ccc;
		text-decoration: line-through
	}
	.t .t1{
		padding: 20rpx;
	}
	.t .t1 .wz{
	
	display: flex;
	justify-content: space-between;
	}
	.t .t1 .wz .xs{
		font-size: 35rpx;
		font-weight: bolder;
		color: #85A642;
		
	}
	.t .t1 .stop{
		color: #B1CC7A;
		margin-top: 20rpx;
	}
	.t .t1 .time{
		color: white;
margin-top: 20rpx;
	}
	.t .t1 .time text{
		background: #85A642;
		font-size: 40rpx;
	}
	.t .t2 .yt,
	.t .t2 .yt1{
		padding: 13rpx;
		
	}
	.t .t2 .yt .new,
	.t .t2 .yt1 .new{
		color: red;
		font-size: 30rpx;
		font-weight: bolder;
		margin-bottom: 10rpx;
	}
	.t .t2 .yt .time,
	.t .t2 .yt1 .time{
		color: red;
	
	}
		.t .t2 .yt .hb,
		.t .t2 .yt1 .hb{
			margin-top: 10rpx;
			background-color: red;
			width: 180rpx;
			padding: 10rpx;
			color: white;
			font-size: 30rpx;
			border-top-right-radius: 30rpx;
			border-bottom-right-radius: 30rpx;
		}
</style>
